<template>
  <div class="table-page">
    <el-form :model="filterFormData" inline>
      <slot name="filter"></slot>
      <slot name="buttonGroup">
        <el-form-item>
          <el-button type="primary" @click="getData">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </slot>
    </el-form>
    <el-table
      :data="tableData"
      v-loading="loading"
      :header-cell-style="{ background: '#F2F3F5', color: '#262729' }"
      :cell-style="{ color: '#4D525C' }"
    >
      <el-table-column v-if="!removeIndex" type="index" label="序号" width="60">
        <template slot-scope="scope">
          {{ (pageParams.page - 1) * pageParams.limit + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        v-for="(item, key) in tableRowConfig"
        show-overflow-tooltip
        :key="key"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        :min-width="item.minWidth"
        :fixed="item.fixed"
        :align="item.align"
      >
        <template slot-scope="{ row }">
          <span
            :class="getValue(item, 'className', row)"
            :style="getValue(item, 'style', row)"
          >
            {{ item.text ? getValue(item, 'text', row) : row[item.prop] }}
          </span>
        </template>
      </el-table-column>
      <slot name="table"></slot>
    </el-table>
    <el-pagination
      :total="total"
      :page-sizes="pageSizes"
      :page-size="pageParams.limit"
      class="alignRight"
      layout="total,sizes, prev, pager, next"
      @size-change="changePageLimit"
      @current-change="changePageIndex"
    ></el-pagination>
  </div>
</template>
<script>
/**
 * tablePage 当页面基本功能为一个普通表格时适用
 *
 */
export default {
  props: {
    // 筛选数据
    filterFormData: Object,
    // 获取table列表的方法,方法返回值必须是一个promise，格式为后端标准格式，例如：http://cdc-doc-test.risechina.com/doc.html#/promo-admin/%E6%B4%BB%E5%8A%A8%E7%AE%A1%E7%90%86/findPromoActionListUsingGET
    getTableList: {
      type: Function,
      default: () => () => new Promise()
    },
    // table每行的数据
    tableRowConfig: {
      type: Array,
      default: () => []
    },
    // 筛选条件修改后立即查找
    immediatelyQuery: {
      type: Boolean,
      default: true
    },
    // 分页可选每页数量
    pageSizes: {
      type: Array,
      default: () => [20, 50, 100, 200, 500]
    },
    // 初始每页数量
    pageSize: {
      type: Number,
      default: 20
    },
    // 是否移出序号
    removeIndex: Boolean
  },
  data() {
    return {
      tableData: [],
      pageParams: {
        page: 1,
        limit: this.pageSize
      },
      total: 0,
      loading: false,
      cloneFormData: ''
    }
  },
  created() {
    this.cloneFormData = JSON.stringify(this.filterFormData)
    this.getData()
  },
  methods: {
    reset() {
      this.$emit('update:filterFormData', JSON.parse(this.cloneFormData))
    },
    // 修改页码
    changePageIndex(index) {
      this.pageParams.page = index
      this.getData()
    },
    // 修改每页条数
    changePageLimit(number) {
      this.pageParams = {
        page: 1,
        limit: number
      }
      this.getData()
    },
    //获取列表数据
    getData(needInit) {
      this.loading = true
      if (needInit) {
        this.pageParams.page = 1
      }
      this.getTableList({
        ...this.pageParams,
        ...this.filterFormData
      })
        .then(res => {
          this.tableData = res.data.records
          this.pageParams = {
            page: res.data.current >> 0,
            limit: res.data.size >> 0
          }
          this.total = res.data.total >> 0
        })
        .finally(() => {
          this.loading = false
        })
    },
    getValue(item, key, row) {
      if (!item[key]) return
      return typeof item[key] === 'function' ? item[key](row) : item[key]
    }
  },
  watch: {
    filterFormData: {
      deep: true,
      handler() {
        if (this.immediatelyQuery) {
          this.changePageIndex(1)
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.table-page {
  padding: 15px;
}
.alignRight {
  text-align: right;
}
</style>
